<template>
  <SideBarSection>
    <nav :aria-label="$t('primary')">
      <SideBarLink
        v-for="item in menuItems"
        :key="item.route"
        :title="$t(item.title)"
        :routeId="item.route"
        :icon="item.icon"
      />
    </nav>
    <BottomInfo />
  </SideBarSection>
</template>

<script>
import BottomInfo from './bottom-info.vue';
import SideBarSection from './side-bar-section.vue';
import SideBarLink from './side-bar-link.vue';
import { AppRoute } from '../../../constants/constants';
import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiSync } from '@mdi/js';

export default {
  components: {
    BottomInfo,
    SideBarSection,
    SideBarLink,
  },
  data() {
    return {
      AppRoute,
      menuItems: [
        { title: 'users', route: AppRoute.ADMIN_USER_MANAGEMENT, icon: mdiAccountMultipleOutline },
        { title: 'jobs', route: AppRoute.ADMIN_JOBS, icon: mdiSync },
        { title: 'settings', route: AppRoute.ADMIN_SETTINGS, icon: mdiCog },
        { title: 'external_libraries', route: AppRoute.ADMIN_LIBRARY_MANAGEMENT, icon: mdiBookshelf },
        { title: 'server_stats', route: AppRoute.ADMIN_STATS, icon: mdiServer },
      ],
      mdiAccountMultipleOutline,
      mdiBookshelf,
      mdiCog,
      mdiServer,
      mdiSync,
    };
  },
};
</script>